<template>
	<view @touchmove.stop.prevent="() => {}" class="itu-privacy-authorize" :class="[{'itu-privacy-authorize--bottom': position == 'bottom'}]" v-if="showPrivacy">
		<view class="itu-privacy-authorize__container" :style="{'--color':defaultColor, '--border-radius': borderRadius,'backgroundColor': bgColor}">
			<view class="itu-privacy-authorize__container-title">{{title}}</view>
			<view class="itu-privacy-authorize__container-content">
				{{prepend}}<text @click.stop="openPrivacyContract">{{ privacyContractNameCustom||privacyContractName }}</text>{{append}}
			</view>
			<view class="itu-privacy-authorize__container-footer">
				<button class="itu-privacy-authorize__container-button itu-privacy-authorize__container-button--disagree"
								:class="{'itu-privacy-authorize__container-button--circle': shape === 'circle'}"
								:style="[{color: disagreeTextColor}]"
								@click="disagree">{{disagreeText}}</button>
				<button id="ituPrivacyAuthorizeAgree" class="itu-privacy-authorize__container-button" 
								:class="{'itu-privacy-authorize__container-button--circle': shape === 'circle'}"
								:style="[{backgroundColor: defaultColor, color: agreeTextColor}]"
				        open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="agree">{{agreeText}}</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			// 位置，可选值center、bottom
			position: {
				type: String,
				default: 'center'
			},
			// 主题色
			themeColor: {
				type: String,
				default: ''
			},
			// 背景圆角
			borderRadius: {
				type: String,
				default: '16rpx'
			},
			// 背景色
			bgColor: {
				type: String,
				default: '#FFFFFF'
			},
			// 同意文本颜色
			agreeTextColor:{
				type: String,
				default: '#FFFFFF'
			},
			// 不同意文本颜色
			disagreeTextColor:{
				type: String,
				default: '#666666'
			},
			// 同意文本
			agreeText:{
				type: String,
				default: '同意'
			},
			// 拒绝文本
			disagreeText:{
				type: String,
				default: '拒绝'
			},
			// 按钮形状 可选值 square、circle
			shape: {
				type: String,
				default: "square", // circle
			},
			// 使用到隐私相关api时触发弹窗，设置为false时初始化弹窗将判断是否需要隐私授权，需要则直接弹出
			onNeed: {
				type: Boolean,
				default: false
			},
			// 是否需要隐藏tabbar,在首页等tabbar页面使用改弹窗时建议改为true
			hideTabBar: {
				type: Boolean,
				default: false
			},
			// 标题
			title: {
				type: String,
				default: '用户隐私保护提示'
			},
			// 协议名称前的内容
			prepend: {
				type: String,
				default: '使用前请仔细阅读'
			},
			// 协议名称后的内容
			append: {
				type: String,
				default: '当您点击同意后，即表示您已理解并同意该条款内容；如您拒绝，将无法使用该服务。'
			},
			// 自定义协议名称，不传则由小程序自动获取
			privacyContractNameCustom: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				defaultColor: "",
				privacyContractName: "",
				resolvePrivacyAuthorization: null,
				showPrivacy: false,
			};
		},
		created() {
			this.defaultColor = this.themeColor || this.$itu.color.primary
			this.checkPrivacySetting();
		},
		methods: {
			// 打开授权弹窗
			open(name) {
				if (this.hideTabBar) {
					uni.hideTabBar();
				}
				this.privacyContractName = name
				this.showPrivacy = true;
			},
			// 关闭授权弹窗
			close() {
				this.showPrivacy = false;
				if (this.hideTabBar) {
					uni.showTabBar();
				}
			},
			// 同意授权
			agree() {
				if (this.onNeed) {
					this.resolvePrivacyAuthorization({
						buttonId: "ituPrivacyAuthorizeAgree",
						event: "agree",
					});
				}
				this.close();
				this.$emit('agree')
			},
			// 点击取消
			disagree() {
				if (this.onNeed) {
					this.resolvePrivacyAuthorization({
						event: "disagree",
					});
				}
				this.close();
				this.$emit('disagree')
			},
			// 查看隐私协议内容
			openPrivacyContract() {
				uni.openPrivacyContract();
			},
			// 进入时获取隐私是否需要弹出隐私协议
			checkPrivacySetting() {
				uni.getPrivacySetting({
					success: (res) => {
						// 如果是needAuthorization为false，无需弹出隐私协议
						if (res.needAuthorization === false) return;
						if (this.onNeed) {
							uni.onNeedPrivacyAuthorization((resolve) => {
								this.open(res.privacyContractName)
								this.resolvePrivacyAuthorization = resolve;
							});
						} else {
							this.open(res.privacyContractName)
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	$privacyAuthorizePrefix: itu-privacy-authorize;

	.#{$privacyAuthorizePrefix} {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		animation: ituPrivacyAuthorizeFadeIn 0.2s linear both;

		&__container {
			width: 650rpx;
			min-height: 400rpx;
			border-radius: var(--border-radius);
			padding: 50rpx;
			font-size: 28rpx;
			animation: ituPrivacyAuthorizeFadeInBig 0.2s 0.2s linear both;
			backdrop-filter: blur(10rpx);

			&-title {
				color: #333333;
				font-size: 34rpx;
				text-align: center;
			}

			&-content {
				color: #595959;
				margin-top: 36rpx;
				margin-bottom: 36rpx;
				line-height: 50rpx;
				white-space: pre-wrap;

				text {
					color: var(--color);
				}
			}

			&-footer {
				display: flex;
				justify-content: space-between;

				// 重置微信小程序的按钮样式
				button{
					padding-left: 0!important;
					padding-right: 0!important;
					margin-left: 0!important;
					margin-right: 0!important;
				}
				button:after {
					border: none;
				}
			}
			&-button {
				width: 260rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				text-align: center;
				
				&--disagree{
					background-color: #ededed;
				}
				
				&--circle{
					border-radius: 40rpx;
				}
			}
		}

		&--bottom {
			align-items: flex-end;

			.#{$privacyAuthorizePrefix}__container {
				width: 100%;
				animation: ituPrivacyAuthorizeFadeIn 0.2s linear both;
				animation: ituPrivacyAuthorizeFadeInUp 0.2s 0.2s linear both;
				padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
				border-radius: var(--border-radius) var(--border-radius) 0 0;
				
				&-button {
					width: 300rpx;
				}
			}
		}
	}

	@keyframes ituPrivacyAuthorizeFadeIn {
		0% {
			opacity: 0.5;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes ituPrivacyAuthorizeFadeInBig {
		0% {
			opacity: 0;
			transform: scale(0.5);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes ituPrivacyAuthorizeFadeInUp {
		0% {
			opacity: 0;
			transform: translate3d(0, 100%, 0);
		}

		100% {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}
</style>